<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>东方故事音频播放器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
        }
        .input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .audio-list {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .audio-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .audio-item:hover {
            background-color: #f8f9fa;
        }
        .audio-item.active {
            background-color: #e9ecef;
        }
        .audio-player {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            display: none;
        }
        .audio-player.active {
            display: block;
        }
        .loading {
            text-align: center;
            padding: 20px;
            display: none;
        }
        .loading.active {
            display: block;
        }
        .error {
            color: #dc3545;
            text-align: center;
            margin: 10px 0;
            display: none;
        }
        .error.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>东方故事音频播放器</h1>
        </div>
        
        <div class="input-group">
            <input type="text" id="sbookId" placeholder="请输入sbookId" value="452">
            <button onclick="fetchAudioList()">获取列表</button>
        </div>

        <div class="loading" id="loading">加载中...</div>
        <div class="error" id="error"></div>
        
        <div class="audio-list" id="audioList"></div>
        
        <div class="audio-player" id="audioPlayer">
            <audio id="audio" controls style="width: 100%"></audio>
        </div>
    </div>

    <script>
        const audioList = document.getElementById('audioList');
        const audioPlayer = document.getElementById('audioPlayer');
        const audio = document.getElementById('audio');
        const loading = document.getElementById('loading');
        const error = document.getElementById('error');

        async function fetchAudioList() {
            const sbookId = document.getElementById('sbookId').value;
            if (!sbookId) {
                showError('请输入sbookId');
                return;
            }

            showLoading();
            hideError();
            audioList.innerHTML = '';

            try {
                const response = await fetch(`https://readapi.dolphinmedia.cn/rdapi/record/h5booksDetail?sbookId=${sbookId}&source=1`);
                const data = await response.json();

                if (data.code !== 0) {
                    throw new Error(`API返回错误码: ${data.code}`);
                }

                const audioList = data.data.audioList;
                if (!audioList || !Array.isArray(audioList)) {
                    throw new Error('未获取到有效的音频列表');
                }

                renderAudioList(audioList);
            } catch (err) {
                showError(err.message);
            } finally {
                hideLoading();
            }
        }

        function renderAudioList(list) {
            audioList.innerHTML = list.map((item, index) => `
                <div class="audio-item" onclick="playAudio('${item.url}', '${item.title}')">
                    ${index + 1}. ${item.title}
                </div>
            `).join('');
        }

        function playAudio(url, title) {
            const fullUrl = `https://readresource.dolphinmedia.cn/${url}`;
            audio.src = fullUrl;
            audioPlayer.classList.add('active');
            audio.play();

            // 更新当前播放项的样式
            const items = document.querySelectorAll('.audio-item');
            items.forEach(item => {
                if (item.textContent.includes(title)) {
                    item.classList.add('active');
                } else {
                    item.classList.remove('active');
                }
            });
        }

        function showLoading() {
            loading.classList.add('active');
        }

        function hideLoading() {
            loading.classList.remove('active');
        }

        function showError(message) {
            error.textContent = message;
            error.classList.add('active');
        }

        function hideError() {
            error.classList.remove('active');
        }

        // 页面加载完成后自动获取列表
        window.onload = fetchAudioList;
    </script>
</body>
</html> 